<template>
  <div class="module-card">
    <div class="module-header">
      <h2 class="module-title">{{ title }}</h2>
      <div class="flex space-x-1">
        <button class="px-2 py-1 text-xs bg-primary text-blue rounded" @click="setOrderTrendPeriod('month')"
          :class="{ 'bg-primary text-blue': orderTrendPeriod === 'month' }">月</button>
        <button class="px-2 py-1 text-xs text-gray-600 hover:bg-gray-100 rounded"
          @click="setOrderTrendPeriod('quarter')"
          :class="{ 'bg-primary text-blue': orderTrendPeriod === 'quarter' }">季</button>
        <button class="px-2 py-1 text-xs text-gray-600 hover:bg-gray-100 rounded" @click="setOrderTrendPeriod('year')"
          :class="{ 'bg-primary text-blue': orderTrendPeriod === 'year' }">年</button>
      </div>
    </div>
    <div class="p-4">
      <div class="h-64" ref="orderTrendChart"></div> <!-- 注意这里改为div容器 -->
    </div>
  </div>
</template>

<script>
import * as echarts from "echarts";
// import { getEntityZhe } from '@/api/home/home';

export default {
  data() {
    return {
      orderTrendPeriod: 'month',
      orderChart: null,
      title: '订单金额趋势',
      trendData: {} // 存储接口返回的原始数据（{ "2025-07-10": {...}, ... }）

    }
  },
  mounted() {
    const userType = this.$store.getters.userType;

    if (userType === '03') {
      this.title = "订单金额趋势（收入）";
    } else {
      this.title = "订单金额趋势（支出）";
    }
    // 先初始化图表，再获取数据（确保图表实例已创建）
    this.orderChart = echarts.init(this.$refs.orderTrendChart);
    this.getData(); // 获取数据后会触发updateOrderTrendChart
    window.addEventListener('resize', this.handleResize);
  },
  beforeDestroy() {
    // 销毁图表实例，释放资源
    if (this.orderChart) {
      this.orderChart.dispose();
    }
    window.removeEventListener('resize', this.handleResize);
  },
  methods: {
    async getData() {
      const today = new Date();
      const year = today.getFullYear();
      const month = today.getMonth(); // 月份从0开始（0=1月，11=12月）

      // 当月第一天
      const startDate = new Date(year, month, 1);
      // 当月最后一天（下月第一天减1天）
      const endDate = new Date(year, month + 1, 0);

      // 格式化为 "YYYY-MM-DD"
      const formatDate = (date) => {
        const year = date.getFullYear();
        const month = String(date.getMonth() + 1).padStart(2, '0'); // 月份从0开始，需+1
        const day = String(date.getDate()).padStart(2, '0');
        return `${year}-${month}-${day}`;
      };
      try {
        // 假设接口参数按周期动态获取（此处示例固定为7月，实际可根据周期计算）
        const res = await getEntityZhe({
          startDate: formatDate(startDate),
          endDate: formatDate(endDate)
        });
        if (res.code === 200) {
          this.trendData = res.data; // 保存原始数据（键为日期，值为包含totalIncome等的对象）

          this.updateOrderTrendChart(); // 数据更新后重新渲染图表
        }
      } catch (error) {
        console.error("获取数据失败：", error);
      }
    },

    getChartData() {
      const userType = this.$store.getters.userType;
      const rawData = this.trendData; // 从接口获取的原始数据
      const timeLabels = []; // 最终图表的x轴标签
      const values = []; // 最终图表的y轴数值（根据用户类型提取）

      // 1. 处理“月”周期（按日期分组，示例取1-31日，实际可根据原始数据中的日期动态生成）
      if (this.orderTrendPeriod === 'month') {
        // 提取原始数据中的所有日期并排序（如["2025-07-10", "2025-07-11", ...]）
        const sortedDates = Object.keys(rawData).sort((a, b) => new Date(a) - new Date(b));

        // 格式化标签为“1日”“10日”等，并提取对应数值
        sortedDates.forEach(date => {
          const day = new Date(date).getDate(); // 获取日期中的“日”（1-31）
          timeLabels.push(`${day}日`);

          // 根据用户类型提取对应字段的值
          const entityData = rawData[date];
          let value = 0;
          if (userType === '03') {
            value = Number(entityData.totalIncome) || 0; // 03类型取totalIncome
          } else {
            value = Number(entityData.totalExpense) || 0; // 02类型取totalExpense
          }
          values.push(value);
        });
      }

      // 2. 处理“季”周期（按月份分组，示例取当季3个月，实际可根据季度动态生成）
      else if (this.orderTrendPeriod === 'quarter') {
        // 假设当前为Q3（7-9月），实际可根据接口返回的日期范围计算季度
        const months = ['7月', '8月', '9月'];
        timeLabels.push(...months);

        // 按月份汇总数值（示例：遍历原始数据，累加每个月的数值）
        months.forEach(month => {
          let total = 0;
          Object.keys(rawData).forEach(date => {
            // 判断日期是否属于当前月份（如“2025-07-xx”属于“7月”）
            if (new Date(date).getMonth() + 1 === parseInt(month)) {
              const entityData = rawData[date];
              if (userType === '03') {
                total += Number(entityData.totalIncome) || 0;
              } else {
                total += Number(entityData.totalExpense) || 0;
              }
            }
          });
          values.push(total);
        });
      }

      // 3. 处理“年”周期（按月份分组，1-12月）
      else {
        const months = ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月'];
        timeLabels.push(...months);

        // 按月份汇总数值（逻辑同季度，范围扩展到全年）
        months.forEach((month, index) => {
          let total = 0;
          Object.keys(rawData).forEach(date => {
            if (new Date(date).getMonth() === index) { // getMonth()返回0-11，对应1-12月
              const entityData = rawData[date];
              if (userType === '03') {
                total += Number(entityData.totalIncome) || 0;
              } else {
                total += Number(entityData.totalExpense) || 0;
              }
            }
          });
          values.push(total);
        });
      }
      // console.log("chartOrderTrend--处理后的数据:", timeLabels, values);
      return { labels: timeLabels, values: values };
    },
    handleResize() {
      if (this.orderChart) {
        this.orderChart.resize();
      }
    },
    setOrderTrendPeriod(period) {
      this.orderTrendPeriod = period;
      this.updateOrderTrendChart();
    },
    updateOrderTrendChart() {
      const chartData = this.getChartData();
      // 设置ECharts配置项
      const option = {
        tooltip: {
          trigger: 'axis',
          formatter: '{b}: {c} 元'
        },
        grid: {
          left: '3%',
          right: '4%',
          bottom: '3%',
          containLabel: true
        },
        xAxis: {
          type: 'category',
          boundaryGap: false,
          data: chartData.labels
        },
        yAxis: {
          type: 'value',
          min: 0
        },
        series: [{
          name: '订单金额',
          type: 'line',
          data: chartData.values,
          lineStyle: {
            color: '#3b82f6'
          },
          areaStyle: {
            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
              { offset: 0, color: 'rgba(59, 130, 246, 0.3)' },
              { offset: 1, color: 'rgba(59, 130, 246, 0)' }
            ])
          },
          smooth: true // 平滑曲线
        }]
      };
      this.orderChart.setOption(option);
    },

  }
}
</script>

<style scoped>
.text-blue {
  color: #3c9cff;
}
</style>